<template>
    <div class="show">
        <banner :boole="boole"></banner>
        <div class="show_box" v-for="(v, index) in showarr" :key="index" @click="todetail(v)">
            <img :src="v.img1" alt="">
            <div class="showBox">
                <p>{{ v.proname }}</p>
                <div class="showspan">
                    <span>￥{{ v.originprice }}</span>
                    <span>{{ v.sales }}+人已购买</span>
                </div>
            </div>
        </div>
    </div>
    </template>
    
    <script>
    import banner from './banner.vue'
    export default {
        data() {
            return {
                showarr: [],
                num:21
            }
        },
        props: ["boole"],
        components:{
            banner
        },
        mounted() {
            
            this.$http({
                url:"http://118.178.238.19:3001/api/pro/search",
                method:"get",
                params:{
                    limitNum: this.num
                }
            }).then(res=>{
                this.showarr = res.data.data
                console.log(res.data.data);
            })
          
        },
        methods:{
            todetail(v){
                this.$router.push({
                    path:'/detailPage',
                    query: { data: JSON.stringify(v)}
                })
            }
        }
    }
    </script>
    
    
    <style scoped>
    html,body{
        font-size: 50px;
    }
    .show {
        width: 96%;
        height: auto;
        margin: 0.2rem 2%;
        box-sizing: border-box;
        column-count: 2;
    }
    
    .show .show_box {
        box-sizing: border-box;
        background: #fff;
        display: flex;
        flex-direction: column;
        break-inside: avoid;
        border-radius: .2rem;
        margin-bottom: .2rem;
        overflow: hidden;
    }
    .show_box img{
        width: 100%;
        height: 100%;
    }
    .show_box .showBox {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: .2rem;
    }
    
    .show_box p {
        font-size: .26rem;
        color: #434343;
        line-height: .4rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .showspan{
        width: 100%;
        display: flex;
        align-items: center;
    }
    .showspan span:nth-child(1) {
        font-size: .28rem;
        color: #FF5500;
    }
    .showspan span:nth-child(2) {
        display: block;
        height: .32rem;
        margin-left: .2rem;
        font-size: .24rem;
        color: #999999;
        white-space: pre-line;
        overflow: hidden;
    }
    </style>